<template>
  <div class="navigation">
    <div class="links">
      <NuxtLink v-for="(k, i) in linkList" :to="k.url" class="button--green" v-if="i<5" :key="i">{{k.title}}</NuxtLink>
      <a v-for="(k, i) in linkList"
         v-if="i>5"
         :key="i"
         :href="k.url"
         target="_blank"
         rel="noopener noreferrer"
         class="button--green"
      >
        {{k.title}}
      </a>
    </div>
    <hr>
<!--    <Nuxt />-->
  </div>
</template>
<script>
// import axios from 'axios'
export default {
  data(){
    return{
      server:process.server,
      linkList:[
        {title:'Home',content:'c1',url:'/'},
        {title:'getEmail',content:'c1',url:'/getEmail'},
        {title:'Dog',content:'c1',url:'/dimg'},
        {title:'Maoyan',content:'c1',url:'/maoyan'},
        {title:'More',content:'c1',url:'/more'},
        {title:'Todos',content:'c1',url:'/todos'},
        {title:'Documentation',content:'c1',url:'https://nuxtjs.org/'},
        {title:'GitHub',content:'c2',url:'https://github.com/nuxt/nuxt.js'},
        {title:'localhost',content:'c3',url:'http://localhost/kabeilu/nuxt/nuxtjs/dist'},
        {title:'nuxtjs-axios|axios中文网',content:'c3',url:'http://axios-js.com/zh-cn/docs/nuxtjs-axios.html'},
      ]
    }
  },
}
</script>
<style>
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>
